<template>
	<view class="course-detail home-wrap" :style="{ 'background':'#fff'}">
		<shopro-navbar :isBack="true" :background="{'background':'#fff'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">
				课程详情
			</text>
		</shopro-navbar>
		
		<!-- 客服弹窗 -->
		<view v-if="showContactModal" class="contact-modal-mask">
			<view class="contact-modal">
				<view class="contact-modal-header">
					<text class="contact-modal-title">联系客服</text>
				</view>
				<view class="contact-modal-content">
					<view class="contact-modal-item">
						<image class="contact-modal-icon" :src="HTTP_IMG_URL()+'/static/images/phone.png'" mode="aspectFill" />
						<view class="contact-modal-info">
							<text class="contact-modal-label">热线电话</text>
							<text class="contact-modal-value">
								{{configInfo.service_phone}}
							</text>
						</view>
					</view>
					<view class="contact-modal-item">
						<image class="contact-modal-icon" :src="HTTP_IMG_URL()+'/static/images/email.png'" mode="aspectFill" />
						<view class="contact-modal-info">
							<text class="contact-modal-label">服务邮箱</text>
							<text class="contact-modal-value">
								{{configInfo.service_email}}
							</text>
						</view>
					</view>
				</view>
				<view class="contact-modal-footer">
					<view class="contact-modal-confirm" @click="showContactModal = false">
						确 定
					</view>
				</view>
				<view class="contact-modal-close" @click="showContactModal = false">
					<image :src="HTTP_IMG_URL()+'/static/images/close.png'" mode="aspectFill" class="contact-modal-close-img" />
				</view>
			</view>
		</view>
		
		<!-- 课程基本信息 -->
		<view class="course-info">
			<view class="course-title-row">
				<text class="course-title">{{ courseInfo.info.name }}</text>
				<text class="course-date">{{ courseInfo.expireDate }}</text>
			</view>
			<image :src="courseInfo.info.image" class="course-cover" mode="aspectFill">
				<!-- <view class="play-btn" @click="onPlayVideo">
					<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
				</view> -->
			</image>
			<view class="course-price-row u-flex u-flex-between">
				<text class="course-price">
					价格：<text class="price">￥{{ courseInfo.info.price }}</text>
				</text>
				<view class="u-flex">
					<view class="btn-outline" @click="onContact">咨询客服</view>
					<view class="btn-primary u-m-l-30" @click="onBuy" v-if="courseInfo.is_buy !== 1">
						立即购买
					</view>
				</view>
			</view>
			<view class="course-meta u-p-t-20">
				<text>主讲老师：{{ courseInfo.info.teacher }}</text>
				<text>课程时间：购买后365天有效</text>
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-bar">
			<view :class="['tab-item', tabIndex === 0 ? 'active' : '']" @click="tabIndex = 0">课程简介</view>
			<view :class="['tab-item', tabIndex === 1 ? 'active' : '']" @click="tabIndex = 1">课程目录</view>
		</view>

		<!-- Tab内容 -->
		<view v-if="tabIndex === 0" class="tab-content">
			<text>{{ courseInfo.info.introduce }}</text>
		</view>
		<view v-else class="tab-content">
			<CourseCatalog :sections="courseInfo.category_list" :formType="formType" @startLesson="onStartLesson"/>
		</view>
	</view>
</template>

<script>
import { record } from '@/api'
import { HTTP_IMG_URL } from "@/config/app";
import CourseCatalog from '@/components/CourseCatalog.vue'
export default {
	components: {
		CourseCatalog
	},
	data() {
		return {
			courseId: '',
			showContactModal: false,
			tabIndex: 1, // 默认显示课程目录
			courseInfo: {},
			configInfo: {},
			formType: ''
		}
	},
	onLoad(options) {
		console.log(options, 'optionsoptions');
		this.courseId = options.courseId;
		this.formType = options.source;
		this.getCourseDetail();
		this.getConfig();
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		async getCourseDetail () {
			const res = await record.getInfo({
				id: this.courseId
			}).then(res => {
				if (res.response.data.code == 1) {
					// console.log(res.response.data, 'courseInfo');
					this.courseInfo = res.response.data.data;
				}
			})
		},
		async getConfig () {
			const res = await record.getSystemConfig().then(res => {
				if (res.response.data.code == 1) {
					console.log(res.response.data, 'configInfo');
					this.configInfo = res.response.data.data;
				}
			})
		},
		onBack() {
			uni.navigateBack();
		},
		onPlayVideo() {
			// 播放课程介绍视频，留口子
			uni.showToast({ title: '播放视频', icon: 'none' });
		},
		onContact() {
			// 咨询客服弹窗
			this.showContactModal = true;
		},
		onBuy() {
			uni.navigateTo({
				url: '/pages/pay/pay?courseId=' + this.courseId
			})
		},
		onStartLesson(lesson) {
			console.log(lesson, 'lessonlesson');
			if(lesson.is_charge === 2 || this.formType === 'yigou') {
				uni.navigateTo({
					url: '/pages/course/studyCourse?lessonStr=' + JSON.stringify(lesson)
				})
			} else {
				uni.navigateTo({
					url: '/pages/pay/pay?courseId=' + this.courseId
				})
			}	
		}
	}
}
</script>

<style lang="scss" scoped>
.course-detail {
	background: #f7f8fa;
	min-height: 100vh;
}
.header-bar {
	display: flex;
	align-items: center;
	padding: 24rpx 0 12rpx 12rpx;
	background: #fff;
}
.header-title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
}
.course-info {
	background: #fff;
	margin: 24rpx 24rpx 0 24rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 24rpx;
	position: relative;
}
.course-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}
.course-title {
	font-size: 32rpx;
	font-weight: bold;
}
.course-date {
	color: #bbb;
	font-size: 24rpx;
}
.course-cover {
	width: 100%;
	height: 220rpx;
	overflow: hidden;
	border-radius: 16rpx;
	margin: 16rpx 0;
	position: relative;
	display: block;
}
.play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.4);
	border-radius: 50%;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.course-price-row {
	display: flex;
	align-items: center;
	margin: 12rpx 0;
	padding-bottom: 20rpx;
	border-bottom:  1px solid rgba(151,151,151,0.08);
}
.course-price {
	font-size: 28rpx;
	color: #222;
	margin-right: 16rpx;
}
.price {
	color: #e53935;
	font-weight: bold;
}
.btn-outline {
	border: 1rpx solid #2563eb;
	color: #2563eb;
	background: #fff;
	margin-right: 16rpx;
	border-radius: 24rpx;
	font-size: 26rpx;
	padding: 8rpx 24rpx;
}
.btn-primary {
	background: #2563eb;
	color: #fff;
	border-radius: 24rpx;
	font-size: 26rpx;
	padding: 8rpx 24rpx;
}
.course-meta {
	color: #888;
	font-size: 24rpx;
	margin-top: 8rpx;
	display: flex;
	justify-content: space-between;
}
.tab-bar {
	display: flex;
	background: #fff;
	margin: 24rpx 24rpx 0 24rpx;
	border-radius: 16rpx 16rpx 0 0;
	overflow: hidden;
}
.tab-item {
	flex: 1;
	text-align: center;
	font-size: 30rpx;
	padding: 24rpx 0;
	color: #333;
	background: #fff;
}
.tab-item.active {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 40rpx;
		height: 4rpx;
		background: #2563eb;
		left:50%;
		margin-left: -25rpx;
	}
}
.tab-content {
	background: #fff;
	margin: 0 24rpx 24rpx 24rpx;
	border-radius: 0 0 16rpx 16rpx;
	padding: 24rpx;
}
.section-block {
	margin-bottom: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	font-weight: bold;
	padding: 16rpx 0;
	cursor: pointer;
}
.section-lessons {
	padding-left: 16rpx;
}
.lesson-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f7f8fa;
	border-radius: 12rpx;
	margin: 12rpx 0;
	padding: 16rpx;
}
.lesson-info {
	display: flex;
	flex-direction: column;
}
.lesson-title {
	font-size: 26rpx;
	font-weight: 500;
}
.lesson-time {
	color: #888;
	font-size: 22rpx;
	margin-top: 4rpx;
}
.lesson-progress {
	color: #bbb;
	font-size: 20rpx;
	margin-top: 2rpx;
}
.btn-study {
	background: #2563eb;
	color: #fff;
	border-radius: 20rpx;
	font-size: 24rpx;
	padding: 8rpx 24rpx;
}
.contact-modal-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-modal {
	width: 600rpx;
	background: linear-gradient( 180deg, #88BEF6 0%, #D1E1FE 100%);
	border-radius: 24rpx;
	position: relative;
	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.10);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contact-modal-header {
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-modal-title {
	color: #011651;
	font-size: 36rpx;
	font-weight: bold;
}
.contact-modal-content {
	width: 100%;
	padding: 30rpx 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contact-modal-item {
	width: 500rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx #f0f0f0;
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	margin-bottom: 24rpx;
}
.contact-modal-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 24rpx;
	border-radius: 50%;
}
.contact-modal-info {
	display: flex;
	flex-direction: column;
}
.contact-modal-label {
	color: #333;
	font-size: 26rpx;
	font-weight: bold;
}
.contact-modal-value {
	color: #888;
	font-size: 24rpx;
	margin-top: 4rpx;
}
.contact-modal-footer {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 32rpx 0 24rpx 0;
}
.contact-modal-confirm {
	width: 480rpx;
	height: 64rpx;
	background: #3a8dff;
	color: #fff;
	border-radius: 32rpx;
	font-size: 30rpx;
	font-weight: bold;
	border: none;
	display:flex;
	justify-content: center;
	align-items: center;
}
.contact-modal-close {
	position: absolute;
	left: 50%;
	bottom: -95rpx;
	transform: translateX(-50%);
	width: 72rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.contact-modal-close-img {
	width: 60rpx;
	height: 60rpx;
}
</style>
